<template>
  <div class="page">
    <Header />
    <el-container>
      <el-header>
        <el-row style="margin-top: 10px">
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-link
                target="_blank"
                @click="toHome"
                style="color: white; font-size: large; margin-top: 5px"
              >
                < 回到主页
              </el-link>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="grid-content bg-purple-light">
              <el-input
                placeholder="请输入内容"
                v-model="keyword"
                clearable
              ></el-input>
              <el-button
                icon="el-icon-search"
                style="width: 100px; height: 38px"
                @click="searchByKeyWord(1)"
                >搜索
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
    </el-container>

    <div
      id="mallPage"
      class="mallist tmall- page-not-market"
      style="margin-top: 20px"
    >
      <!-- 商品详情页面 -->
      <div id="content">
        <div class="main">
          <div class="view grid-nosku">
            <div
              class="product"
              v-for="product in productList"
              :key="product.productId"
            >
              <div class="product-iWrap">
                <div class="productImg-wrap">
                  <router-link
                    :to="'product-detail?productId=' + product.productId"
                  >
                    <img
                      :src="
                        product.productImg.length === 0
                          ? null
                          : product.productImg
                      "
                      alt="Product Image"
                    />
                  </router-link>
                </div>
                <p class="productPrice">
                  <em><b>¥</b>{{ product.price.toFixed(2) }}</em>
                </p>
                <p class="productTitle">
                  <a v-html="product.productName"></a>
                </p>
                <div class="productShop">
                  <span>店铺：新华书店</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 分页组件 -->
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
            :current-page="pageNow"
            @current-change="fetchCatalogueData"
            @size-change="handleSizeChange(pageNow)"
            :page-sizes="[1, 10, 15, 20]"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Catalogue",
  data() {
    return {
      keyword: this.$route.query.keyword || "",
      pageNow: 1,
      pageSize: 10,
      total: 0,
      productList: [],
      catalogueId: "",
    };
  },
  mounted() {
    const catalogueId = this.$route.query.catalogueId;
    console.log("当前目录 ID:", catalogueId);
    this.catalogueId = catalogueId;
    // 根据 catalogueId 执行相应逻辑，例如加载对应数据
    this.fetchCatalogueData(this.pageNow);
  },
  methods: {
    toHome() {
      this.$router.push({
        path: "/",
      });
    },
    fetchCatalogueData(pageNow) {
      // 使用 Axios 发送请求获取数据
      this.$axios
        .get(
          `/getProductbycatalogue?pageNow=${pageNow}&pageSize=${this.pageSize}&catalogueId=${this.catalogueId}`
        )
        .then((response) => {
          const { code, data, message } = response.data;
          console.log(data);
          if (code === 200) {
            this.productList = data.data.products || [];
            this.total = data.catalogueCount || 0;
          } else {
            this.$message.error(message || "获取数据失败");
          }
        })
        .catch((error) => {
          console.error("请求失败:", error);
          this.$message.error("请求失败，请稍后重试");
        });
    },
    prevClick() {
      if (this.pageNow > 1) {
        this.pageNow--;
        this.fetchCatalogueData(this.pageNow);
      }
    },

    nextClick() {
      this.pageNow++;
      this.fetchCatalogueData(this.pageNow);
    },

    currentChange(page) {
      this.pageNow = page;
      this.fetchCatalogueData(page);
    },
    // 每页显示条数改变时
    handleSizeChange(val) {
      this.pageSize = val; // 更新每页条数
      this.fetchCatalogueData(1); // 从第一页开始获取数据
    },
  },
};
</script>

<style scoped src="../../assets/css/style.css"></style>
<style scoped>
.el-input {
  width: 500px;
  margin-right: 20px;
}

.el-header {
  background-color: rgb(200, 9, 9);
  color: #333;
  text-align: center;
}
</style>
